<template>
	<view class="user-layout">
		<!-- 基础信息 -->
		<xh-section-header title="基础信息"></xh-section-header>
		<xh-section-item title="头像" @onClick="selectPhotoAction(1)">
			<template #right>
				<view class="custom-right">
					<image class="custom-right-photo" :src="userStore.user.imgPath || '/static/photo_default.png'" mode="aspectFill"></image>
					<image class="custom-right-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
				</view>
			</template>
		</xh-section-item>
		<xh-section-item title="手机号" :value="userStore.user.tel" isSelect @onClick="changePhoneAction"></xh-section-item>
		<xh-section-item title="商户简称" :value="userStore.user.merName"></xh-section-item>
		<xh-section-item title="经营地址" :value="userStore.user.merAddress" isSelect @onClick="editAddressAction"></xh-section-item>
		<!-- 认证信息 -->
		<xh-section-header title="认证信息"></xh-section-header>
		
		<xh-section-item title="商户编号" :value="userStore.user.merCode"></xh-section-item>
		<xh-section-item title="法人姓名" :value="userStore.user.userName"></xh-section-item>
		<xh-section-item title="身份证号" :value="idCard"></xh-section-item>
		<xh-section-item title="认证时间" :value="userStore.user.authTime"></xh-section-item>
		<view class="user-alipay-box" v-if="!$u.test.isEmpty(userStore.user.alipayMerCode)">
			<xh-section-item title="支付宝子商户号" :value="userStore.user.alipayMerCode"></xh-section-item>
			<xh-section-item title="支付宝审核结果" :value="aliCheckState_text"></xh-section-item>
			<xh-section-item title="支付宝审核驳回原因" :value="userStore.user.aliCheckResult" v-if="userStore.user.aliCheckState == '2'"></xh-section-item>
		</view>
		<view class="user-login-time">
			<text>上次登录时间：2021-05-06 18:21:32</text>
		</view>
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStore } from '@/stores'
	const userStore = useUserStore()
	//页面加载
	onLoad( async ()=>{
		await userStore.updateUserInfo()
	})
	//支付宝审核状态文字描述
	const aliCheckState_text = computed(()=>{
		if(userStore.user.aliCheckState == '0'){
			return '待审核'
		}
		else if(userStore.user.aliCheckState == '1'){
			return '已审核'
		}
		else if(userStore.user.aliCheckState == '2'){
			return '审核失败'
		}
		return ''
	})
	//身份证号
	const idCard = computed(()=>{
		return uni.$tools.formatIdCard(userStore.user.certNo)
	})
	// 选择头像
	const selectPhotoAction = async ()=>{
		try{
			const res = await uni.$tools.uploadImage()
		    editMerchantInfo({merPhoto:res}).then(res=>{
				userStore.user.imgPath = res
			}).catch(err=>{
			})
		}catch(e){
			uni.$tools.showToast(e)
		}
	}
	// 变更手机号
	const changePhoneAction = ()=>{
		uni.navigateTo({
			url:'/pages/my/change-phone/change-phone'
		})
	}
	//修改经营地址
	const editAddressAction = ()=>{
		uni.navigateTo({
			url:'/pages/my/userinfo/edit-address'
		})
	}
</script>

<style lang="scss" scoped>
.user-layout{
	.custom-right{
		display: flex;
		align-items: center;
		.custom-right-photo{
			width: 74rpx;
			height: 74rpx;
			border-radius: 50%;
		}
		.custom-right-icon{
			width: 24rpx;
			height: 24rpx;
			margin-left: 16rpx;
		}
	}
	.user-login-time{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 60rpx;
		color: $xh-subtitle-color;
		font-size: 28rpx;
	}
}
</style>
